<html lang="en"><head>
		<meta charset="utf-8">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
		<title>routeDetails</title>
		<meta content="" name="description">
		<meta content="etch" name="author">
		<meta content="width=device-width; initial-scale=1.0" name="viewport">
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link href="/favicon.ico" rel="shortcut icon">
		<link href="/apple-touch-icon.png" rel="apple-touch-icon">
		<!-- JavaScripts --->
		<script src="js/ratingPlugin/jquery.js"></script>
		<script src="js/ratingPlugin/jquery.rating.js"></script>
		<!-- CSS -->
		<link href="css/ratingPlugin/jquery.rating.css" rel="stylesheet">
		<link href="css/ratingPlugin/documentation.css" rel="stylesheet">
		<style>
label {
    display: inline-block;
    width: 90px;
}

body > div{
    border-bottom: 1px dashed #DDDDDD;
    margin: 10px 0;
    overflow: auto;
    padding: 10px;
}
.route {
    border: 0 none;
}
.route img {
    position: absolute;
    right: 10px;
    top: 10px;
}
div {
}
.route > div {
    border-bottom: 1px dashed #DDDDDD;
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
}
#options label {
    display: inline;
    margin: 0 20px;
}
.num {
    width: 50px;
}
#advanced_options {
    background: none repeat scroll 0 0 #EEEEEE;
    margin-bottom: -10px;
    overflow: auto;
    position: relative;
    text-align: right;
    z-index: 3;
}
#options {
    background: none repeat scroll 0 0 #FEFEFE;
    border-bottom: 0 none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 5px #555555;
    display: none;
    float: right;
    padding: 10px;
}
.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.fix {
    margin-right: 14px;
    margin-top: 14px;
}
body > div:hover {
    background: none repeat scroll 0 0 #FFFFFF;
}
.fifty {
    width: 40%;
}
.width {
    display: inline-block;
    width: 40px;
}
b {
    display: inline-block;
    width:50px;
}
input {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #AAAAAA;
    margin: 2px 5px;
    padding: 1px;
    width: 130px;
}

#comment {
        width:100%;
        height:200px;
}
</style>
	</head>
	<body>
	<div>
	<h1>Route Details<button onclick="enableField()" id="button" type="button">edit</button></h1>
	</div>
	<div>
                <div class="left fifty">
                        <h3>Origin:</h3>
                        <b>Location:</b><input type="text" disabled="disabled" value="Maadi" maxlength="12" size="12" id="posfield">
                        <br/><b>Area:</b><input type="text" disabled="disabled" value="share3 9" maxlength="12" size="12" id="area1">
                </div>        
                <div class="right fifty">
                        <h3>Destination:</h3>
                        <b>Location:</b><input type="text" disabled="disabled" value="Heliopolis" maxlength="12" size="12" id="desfield">
                        <br/><b>Area:</b><input type="text" disabled="disabled" value="share3 9" maxlength="12" size="12" id="area2">
                </div>
        </div>
        <div class="route">
                <h3>Route</h3>                
                <div>
                        <div>
                                <div class="left fifty">
                                        <b class="width">From:</b><br>
                                        <b>Location:</b><input type="text" id="from1" size="12" maxlength="12" value="Maadi" disabled="disabled">
                                        <br/><b>Area:</b><input type="text" id="area3" size="12" maxlength="12" value="share3 9" disabled="disabled">
                               </div>
                               <div class="right fifty">
                                        <b class="width">To:</b><br>
                                 <b>Location:</b><input type="text" id="to1" size="12" maxlength="12" value="tahrir" disabled="disabled">
                                        <br/><b>Area:</b><input type="text" id="area4" size="22" maxlength="22" value="abd el menam reyad" disabled="disabled">
                                </div>
                                <br class="clear">
                        </div>
                        <div>
                                <div class="left">
                                        <br>
                                        Please take the following means to reach your destination:<br><br>
                                        <b style="width:60px">Station 1:</b><input type="text" disabled="disabled" value="Maadi" maxlength="12" size="12" id="station1">
                                        <b>Direction:</b><input type="text" disabled="disabled" value="Marg" maxlength="12" size="12" id="direction1">
                                        <br>                                
                                        <b style="width:60px">Station 2:</b><input type="text" disabled="disabled" value="Anwar sadat" maxlength="12" id="station2" size="12">
                                        <b>Direction:</b><input type="text" disabled="disabled" value="giza" maxlength="12" size="12" id="direction2">
                                </div>
                                <div class="right">
                                        <img width="60" height="60" src="img/metro.jpeg">
                                </div>
                                <br class="clear">
                        </div>

                </div> 
                <div>
                        <div>
                                <div class="left fifty">
                                        <b class="width">From:</b><br>
                                        <b>Location:</b><input type="text" disabled="disabled" value="Tahrir" maxlength="12" size="12" id="from2">
	                                <br/><b>Area:</b><input type="text" disabled="disabled" value="share3 9" maxlength="12" size="12" id="area5">
                                </div>
                                <div class="right fifty">
                                        <b class="width">To:</b><br>
                                        <b>Location:</b><input type="text" id="to2" size="12" maxlength="12" value="Heliopolis" disabled="disabled">
	                                <br/><b>Area:</b><input type="text" id="area6" size="12" maxlength="12" value="share3 9" disabled="disabled"> 
                                </div>
                                                        <br class="clear">
                        </div>
                        <div>
                                <div class="left">
                                
                                        <br>
                                        Please take the following means to reach your destination:<br><br>
                                        <b>Bus Number:</b><input type="text" disabled="disabled" value="758" maxlength="12" size="12" id="busnumber1">
				        <b>Direction:</b><input type="text" disabled="disabled" value="orouba" maxlength="12" size="12" id="busdir">			
                                </div>
                                <div class="right">
                                        <img src="img/bus.png">
                                </div> 
                                                        <br class="clear">
                        </div>
                </div>                 
        </div>
        <div class="right fifty">
        	<input align="right" name="star" type="radio" class="star" disabled="disabled"/>
						<input align="right" name="star" type="radio" class="star" disabled="disabled"/>
						<input align="right" name="star" type="radio" class="star" disabled="disabled"/>
						<input align="right" name="star" type="radio" class="star" disabled="disabled" checked="checked"/>
						<input align="right" name="star" type="radio" class="star" disabled="disabled"/>
        </div>
<br/>
<br/>
		<div>
        <h1>Leave a comment?</h1>
<br/><br/>
<br/>
<b>Your Rating:</b>
<br/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>

<br/><br/>
At Time:
<span id=tick2 height="35">
</span>

<!--					<select>
						<option disabled="true" value="this.selected">Hours</option>
						<option value="1">00</option>
						<option value="1">01</option>
						<option value="2">02</option>
						<option value="3">03</option>
						<option value="4">04</option>
						<option value="1">05</option>
						<option value="2">06</option>
						<option value="3">07</option>
						<option value="4">08</option>
						<option value="1">09</option>
						<option value="2">10</option>
						<option value="3">11</option>
						<option value="4">12</option>
						<option value="1">13</option>
						<option value="2">14</option>
						<option value="3">15</option>
						<option value="4">16</option>
						<option value="2">17</option>
						<option value="3">18</option>
						<option value="4">19</option>
						<option value="1">20</option>
						<option value="2">21</option>
						<option value="3">22</option>
						<option value="3">23</option>
					</select>
					:
					<select>
						<option disabled="true">Minutes</option>
						<option value="1">00</option>
						<option value="1">01</option>
						<option value="2">02</option>
						<option value="3">03</option>
						<option value="4">04</option>
						<option value="1">05</option>
						<option value="2">06</option>
						<option value="3">07</option>
						<option value="4">08</option>
						<option value="1">09</option>
						<option value="2">10</option>
						<option value="3">11</option>
						<option value="4">12</option>
						<option value="1">13</option>
						<option value="2">14</option>
						<option value="3">15</option>
						<option value="4">16</option>
						<option value="2">17</option>
						<option value="3">18</option>
						<option value="4">19</option>
						<option value="1">20</option>
						<option value="2">21</option>
						<option value="2">22</option>
						<option value="3">23</option>
						<option value="4">24</option>
						<option value="3">25</option>
						<option value="4">26</option>
						<option value="2">27</option>
						<option value="3">28</option>
						<option value="4">29</option>
						<option value="1">30</option>
						<option value="3">31</option>
						<option value="4">32</option>
						<option value="1">33</option>
						<option value="2">34</option>
						<option value="3">35</option>
						<option value="4">36</option>
						<option value="2">37</option>
						<option value="3">38</option>
						<option value="4">39</option>
						<option value="1">40</option>
						<option value="3">41</option>
						<option value="4">42</option>
						<option value="1">43</option>
						<option value="2">44</option>
						<option value="3">45</option>
						<option value="4">46</option>
						<option value="2">47</option>
						<option value="3">48</option>
						<option value="4">49</option>
						<option value="1">50</option>
						<option value="3">51</option>
						<option value="4">52</option>
						<option value="1">53</option>
						<option value="2">54</option>
						<option value="3">55</option>
						<option value="4">56</option>
						<option value="2">57</option>
						<option value="3">58</option>
						<option value="4">59</option>
						<option value="1">60</option>
					</select>
-->
					Crowdedness Level:
					<select id="crowded">
						<option value="empty.png">Empty</option>
						<option value="average.png">Average</option>
						<option value="crowded.png">Crowded</option>
						<option value="verycrowded.png">Very Crowded</option>
					</select>
					<img src="img/crowdednessrating/empty.png" height="45"/>
	<br/><br/>	
	&nbsp;&nbsp;&nbsp;	
<textarea id="comment" rows="10" cols="160"></textarea>


<br><br>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="button"  ="22" maxlength="22" value="Post" />
</div>	
<script type="text/javascript">
function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+" "+dn
thelement.innerHTML="<b style='font-size:14;color:black;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2

$(function(){
$('.star').rating();
$('#crowded').change(function(){
		$(this).next().remove();
	$(this).after('<img height="45"src="img/crowdednessrating/'+$(this).val()+'"/>');	
});

})
 function enableField()
   {
   	 var but = document.getElementById('button').textContent;
   	 if(but == "edit")
   	 {
   	 	document.getElementById("posfield").disabled=false;
   	 	document.getElementById("area1").disabled=false;
   	 	document.getElementById("desfield").disabled=false;
   	 	document.getElementById("area2").disabled=false;
   	 	document.getElementById("from1").disabled=false;
   	 	document.getElementById("area3").disabled=false;
   	 	document.getElementById("to1").disabled=false;
   		document.getElementById("area4").disabled=false;
   	   	document.getElementById("station1").disabled=false;
   	    document.getElementById("direction1").disabled=false;
   	    document.getElementById("station2").disabled=false;
   	   	document.getElementById("direction2").disabled=false;
   	   	document.getElementById("from2").disabled=false;
   	   	document.getElementById("area5").disabled=false;
   	   	document.getElementById("to2").disabled=false;
   	   	document.getElementById("area6").disabled=false;
   	   	document.getElementById("busnumber1").disabled=false;
   	   	document.getElementById("busdir").disabled=false;			
   	 	document.getElementById('button').textContent = "save";
   	 }
   	 else
   	 {
   	 	
   	 	document.getElementById("posfield").disabled=true;
   	 	document.getElementById("area1").disabled=true;
   	 	document.getElementById("desfield").disabled=true;
   	 	document.getElementById("area2").disabled=true;
   	 	document.getElementById("from1").disabled=true;
   	 	document.getElementById("area3").disabled=true;
   	 	document.getElementById("to1").disabled=true;
   		document.getElementById("area4").disabled=true;
   	   	document.getElementById("station1").disabled=true;
   	    document.getElementById("direction1").disabled=true;
   	    document.getElementById("station2").disabled=true;
   	   	document.getElementById("direction2").disabled=true;
   	   	document.getElementById("from2").disabled=true;
   	   	document.getElementById("area5").disabled=true;
   	   	document.getElementById("to2").disabled=true;
   	   	document.getElementById("area6").disabled=true;
   	   	document.getElementById("busnumber1").disabled=true;
   	   	document.getElementById("busdir").disabled=true;
   	 	document.getElementById('button').textContent = "edit";
   	 }
     
   }
 
</script>
		
	

</body></html>
